<!--  统计图表组件 -->
<template>
    <div class="statisticalBoard" ref="statisticalBoard"></div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts-liquidfill'

    const statistical = {
        name: "statisticalBoard",
        props: {
            resetChart: {
                type: Object,
                default: () => {
                    return {
                        value: false
                    }
                }
            },
            dataZoom: {
                type: Array
            },
            saveImage: Boolean,
            timer: { // 定时器设置，tooltip是否自动循环移动，默认为false
                type: Boolean,
                default: () => {
                    return false
                }
            },
            graphic: {
                type: Object
            },
            color: {
                type: Array,
                default: () => {
                    return ['#3398DB']
                }
            },
            title: { // 统计图title
                type: Object
            },
            tooltip: {
                type: Object
            },
            legend: {
                type: Object
            },
            xAxis: {
                type: Array
            },
            yAxis: {
                type: Array
            },
            series: {
                type: Array
            },
            grid: {
                type: Object
            },
            visualMap: {
                type: Object
            }
        },
        data() {
            return {
                faultByHourTime: null,
                chartMap: null,
                option: {
                    legend: {
                        orient: 'vertical',
                        right: 2,
                        top: 15,
                        bottom: 15,
                        align: 'right',
                        itemWidth: 16,
                        itemHeight: 16,
                        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    title: {
                        textStyle: {
                            color: '#f0f0f0',
                            fontSize: 14,
                            fontWeight: 'normal',
                            lineHeight: 14
                        },
                        left: 10,
                        top: 10
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#34A9FB'
                            }
                        }
                    }],
                    yAxis: [
                        {
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: {
                                    color: '#34A9FB'
                                }
                            },
                            splitLine: {     //网格线
                                show: false
                            }
                        }
                    ],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                    },
                    series: [{
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                },
                mapOption: {}
            }
        },
        watch: {
            series: function () {

                this.setOptions()

            },
            'resetChart.value': function (val) {

                const $this = this

                if (val) {

                    $this.paintingChart()

                }

            }
        },
        created() {

            this.setOptions()

        },
        mounted() {

            this.paintingChart()

        },
        methods: {
            /**
             * 绘制图表
             **/
            paintingChart() {

                const $this = this

                $this.chartMap = echarts.init($this.$refs.statisticalBoard)

                // 使用刚指定的配置项和数据显示图表。
                $this.chartMap.setOption($this.mapOption, true)

                $this.timer ? $this.getTimeLetTipsInterval() : false

                $this.resetChart.value = false

            },
            /**
             * 设置参数节点
             **/
            setOptions() {
                const $this = this
                if ($this.saveImage) {
                    $this.mapOption.toolbox = {
                        feature: {
                            saveAsImage: {}
                        }
                    }
                }

                if ($this.checkNull($this.dataZoom)) $this.mapOption.dataZoom = $this.dataZoom // 图表tooltip
                if ($this.checkNull($this.title)) $this.mapOption.title = $this.deepCopy($this.option.title, $this.title) // 图表title
                if ($this.checkNull($this.tooltip)) $this.mapOption.tooltip = $this.tooltip // 图表tooltip
                if ($this.checkNull($this.graphic)) $this.mapOption.graphic = $this.graphic // 图表graphic
                if ($this.checkNull($this.legend)) $this.mapOption.legend = $this.deepCopy($this.option.legend, $this.legend) // 图表legend
                if ($this.checkNull($this.xAxis)) $this.mapOption.xAxis = $this.deepCopy($this.option.xAxis[0], $this.xAxis[0]) // 图表xAxis
                if ($this.checkNull($this.yAxis)) $this.mapOption.yAxis = $this.deepCopy($this.option.yAxis[0], $this.yAxis[0]) // 图表yAxis
                if ($this.checkNull($this.grid)) $this.mapOption.grid = $this.deepCopy($this.option.grid, $this.grid) // 图表grid
                if ($this.checkNull($this.color)) $this.mapOption.color = $this.color // 图表color
                if ($this.checkNull($this.series)) $this.mapOption.series = $this.series // 图表series
                if ($this.checkNull($this.visualMap)) $this.mapOption.visualMap = $this.visualMap
            },
            /**
             * 设置统计图tips移动定时器
             * @param obj
             * @returns {number}
             */
            getTimeLetTipsInterval() {
                const $this = this
                let faultByHourIndex = 0 //播放所在下标
                $this.showTips(faultByHourIndex)
                $this.faultByHourTime = setInterval(function () { //使得tootip每隔三秒自动显示
                    $this.showTips(faultByHourIndex)
                    faultByHourIndex++
                    for (var i = 0; i < $this.mapOption.series.length; i++) {
                        const seriesData = $this.mapOption.series[i].data
                        if (seriesData && faultByHourIndex >= seriesData.length) {
                            faultByHourIndex = 0
                        }
                    }
                }, 3000)
            },
            /**
             * 显示tooltip
             * @param index
             */
            showTips(index) {
                this.chartMap.dispatchAction({
                    type: 'showTip', // 根据 tooltip 的配置项显示提示框。
                    seriesIndex: 0,
                    dataIndex: index
                })
            },
            /**
             * 对象合并
             * @param objF 第一个对象
             * @param objT 第二个对象
             * @returns {any | {}} 返回合并后的对象
             */
            deepCopy(objF, objT) {
                return $.extend(true, objF, objT)
            },
            /**
             * 检测是否传过来的有值
             * @param obj
             * @returns {number}
             */
            checkNull(obj) {
                if (obj) {
                    return Object.keys(obj).length > 0
                }
            }
        },
        beforeDestroy() {            
            //清除定时器
            clearInterval(this.faultByHourTime)
            //析构掉生成的echarts对象
            let dcharts = echarts.getInstanceByDom(this.$refs.statisticalBoard)
            if (dcharts) {
                echarts.dispose(dcharts)
            }

            this.$el = null;
        }
    }
    export default statistical
</script>

<style scoped lang="stylus">
    .statisticalBoard
        width: 100%
        height: 100%
        z-index: 1
</style>
